<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="first">
    <input type="text" name="" id="second">


    <div id="test">

    </div>
    <script>
        // const p1 = {
        //     name: '张三',
        //     age: 18,
        //     address: {
        //         city: '北京',
        //         desc:{
        //             a:1,
        //             b:2
        //         }
        //     },
        //     hobby:['吃饭','睡觉','打豆豆']
        // }
        // // 数据劫持
        // // 1. 通过Object.defineProperty()方法
        // const p2 = {name: '张三',
        //     age: 18,
        //     address: {
        //         city: '北京',
        //         desc:{
        //             a:1,
        //             b:2
        //         }
        //     },
        //     hobby:['吃饭','睡觉','打豆豆']
        // };
        // Object.defineProperty(p2,'name',{
        //     // value:'李四',
        //     // // writable:true,
        //     // enumerable:true,
        //     get(){
                
        //         return p1.name;
        //     },
        //     set(val){
        //         p1.name = val;
        //     }
        // })
        // // console.log(p2.name);
        // // p2.name = '王五';   
        // // console.log(p2.name);
        // // for(let key in p2){
        // //     console.log(key);
        // // }

        // // console.log(p2.name);

        function observer(origin,fn){
            // origin 原始的数据
            // fn 劫持以后想做的事情
            let target = {}; // 劫持以后存放的数据 
            for(let key in origin){
                Object.defineProperty(target,key,{
                    get(){
                        return origin[key];
                    },
                    set(val){
                        origin[key] = val;
                        fn(target);
                    }
                })
            }
            return target;
        }

        const p1 = {
            name: '张三',
            age: 18,
            address: {
                city: '北京',
                desc:{
                    a:1,
                    b:2
                }
            },
            hobby:['吃饭','睡觉','打豆豆']
        }

        var test = observer(p1,(target)=>{
            console.log(target);
            document.getElementById('test').innerHTML = 
            `你好，${target.name}，你的年龄是${target.age}岁，你的爱好是${target.hobby}`
        });
       
        document.getElementById('first').oninput = function(){
            test.name = this.value;
        }

        document.getElementById('second').oninput = function(){
            test.age = this.value;
        }
    </script>
</body>
</html>